<template>
	<view>
		<view v-if="JSON.stringify(user) == '{}'" style="display: flex; flex-direction: column; justify-content: center; width: 100%; align-items: center; margin-top: 180px;">	
			<uni-icons type="contact-filled" size="120" color="#afafaf"></uni-icons>
			<button type="primary" class="login" @click="getUserProfile" style="background-color: #84AF9B; ">一键登录</button>
			<text style="font-size: 10px; color: gray; margin-top: 15px;">登录后尽享更多权益</text>
		</view>
		
		<view v-else>
			<view style="background-color: #84AF9B; height: 175px; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;">
				<image :src="user.avatarUrl" style="width: 90px; height: 90px; border: 2px solid white; border-radius: 45px;"></image>
				<text style="font-size: 18px; color: white; margin-top: 5px;">{{user.nickName}}</text>
			</view>
		<!--	
			<view class="panel1">
				<view style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-left: 15px;">
					<text style="margin-bottom: 1px;">8</text>
					<text>收藏的店铺</text>
				</view>
				<view style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
					<text style="margin-bottom: 1px;">14</text>
					<text>收藏的商品</text>
				</view>
				<view style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
					<text style="margin-bottom: 1px;">8</text>
					<text>关注的店铺</text>
				</view>
				<view style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 15px;">
					<text style="margin-bottom: 1px;">84</text>
					<text>足迹</text>
				</view>
			</view>
		
			
			<view class="panel2">
				<view style="height: 30px; display: flex; align-items: center; border-bottom: 1px solid #efefef;">
					<text style="font-size: 13px; margin-left: 8px; ">我的订单</text>
				</view>
		
				<view style="display: flex; font-size: 12px; justify-content: space-between;">
					<view style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-left: 15px; margin-top: 7px;">
						<image src="/static/my-icons/icon1.png" style="height: 30px; width: 30px;"></image>
						<text>待付款</text>
					</view>
					<view style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 7px;">
						<image src="/static/my-icons/icon2.png" style="height: 30px; width: 30px;"></image>
						<text>待发货</text>
					</view>
					<view style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 7px;">
						<image src="/static/my-icons/icon3.png" style="height: 30px; width: 30px;"></image>
						<text>退款/退货</text>
					</view>
					<view style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 15px; margin-top: 7px;">
						<image src="/static/my-icons/icon4.png" style="height: 30px; width: 30px;"></image>
						<text>全部订单</text>
					</view>
				</view>
			</view>
		-->
			
			<view class="panel3">
				<view style="display: flex; justify-content: space-between; align-items: center; margin: 0 8px; border-bottom: 1px solid #efefef; height: 40px;" @click="publish">
					<text>我发布的</text>
					<uni-icons type="arrowright" size="15"></uni-icons>
				</view>
				<view style="display: flex; justify-content: space-between; align-items: center; margin: 0 8px; border-bottom: 1px solid #efefef; height: 40px;" @click="my_msg">
					<text>我的消息</text>
					<uni-icons type="arrowright" size="15"></uni-icons>
				</view>
				<view style="display: flex; justify-content: space-between; align-items: center; margin: 0 8px; border-bottom: 1px solid #efefef; height: 40px;" @click="service">
					<text>联系客服</text>
					<uni-icons type="arrowright" size="15"></uni-icons>
				</view>
				<view style="display: flex; justify-content: space-between; align-items: center; margin: 0 8px; height: 40px;" @click="logout">
					<text>退出登录</text>
					<uni-icons type="arrowright" size="15"></uni-icons>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	
	export default {
		data() {
			return {
				res2: {}
			};
		},
		computed: {
			...mapState('m_cart', ['cart']),
			...mapGetters('m_cart', ['total']),
			...mapGetters('m_cart', ['pay_total']),
			...mapState('m_my', ['user']),
			...mapState('m_my', ['user_id']),
			...mapState('m_my', ['readdress']),
		},
		onLoad() {
			this.cha()
		},
		onShow() {
			this.setCartNum()
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapMutations('m_my', ['updateUSer']),
			...mapMutations('m_my', ['updateReaddress']),
			...mapMutations('m_my', ['updatemy']),
			...mapMutations('m_cart', ['updateCart']),
			
			setCartNum() {
				if(this.pay_total == 0){
					uni.hideTabBarRedDot({
						index: 3,
					})
				}else{
					uni.setTabBarBadge({
						index: 3,
						text: this.pay_total + ''
					})
				}		
			},
			async cha() {
				const db = uniCloud.database();
				if(this.user_id.length == 0) return
				this.res2 = await db.collection("user").where({
					"openid":this.user_id
				}).get()
			},
			async getUserProfile() { 
				const res = await uni.getUserProfile({desc: "登录",})
				if(res[0]!=null && res[0].errMsg == "getUserProfile:fail auth deny") return uni.showToast({
					title: '您取消了授权！',
					duration: 1500,
					icon: 'none'
				})
				let openid=""
				let res1= await wx.login()
				if(res1.code){
					let resopenid = await uniCloud.callFunction({
						name:"get",
						data:{
							code:res1.code
						}
					})
					if(resopenid.result){
						console.log("获取openid成功")
						openid=resopenid.result
					}
				}
				const db = uniCloud.database();
				this.res2 = await db.collection("user").where({
					"openid":openid
				}).get()
				
				console.log(this.res2)
				if(this.res2.result.data.length==0){
					console.log("if执行")

					await db.collection("user").add({
						"openid":openid,
						"my_cart":[],
						"photo": res[1].userInfo.avatarUrl,
						"nickname": res[1].userInfo.nickName
					}).then(e=>{
					 	console.log("上传完毕")
					})	
					this.res2 = await db.collection("user").where({
						"openid":openid
					}).get()
				}
				this.updateCart(this.res2.result.data[0].my_cart)
				console.log(res[1].userInfo)
				this.updatemy(this.res2.result.data[0])
				this.updateUSer(res[1].userInfo)
				this.setCartNum()
				
				uni.showToast({
					title: '登陆成功！',
					duration: 1500,
					icon: 'none'
				})
				if(this.readdress && this.readdress.openType == 'switchTab') {
					uni.switchTab({
						url: this.readdress.from,
						success: () => {
							this.updateReaddress(null)
						}
					})
				}
			},
		
			async logout() {
				const [err, res] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？'
				}).catch(err => err)
				console.log("res2",this.res2.result)
				if(res && res.confirm) {	
					
					let new_item = {...this.res2.result.data[0]}
					delete new_item._id
					console.log(new_item)
					new_item.my_cart = this.cart
					const db = uniCloud.database();
					db.collection("user").doc(this.res2.result.data[0]._id).update(new_item).then(e=>{
						console.log(e)
					})
			
					this.updateUSer({})
					
					this.updatemy({
						"openid": '',
					})
					
					this.updateCart([])
					
					this.setCartNum()
	
				}
			},
			service() {
				uni.navigateTo({
					url: '/subpkg/service/service'
				})
			},
			publish() {
				uni.navigateTo({
					url: '/subpkg/publish/publish'
				})
			},
			my_msg() {
				uni.navigateTo({
					url: '/subpkg/my_msg/my_msg'
				})
			}
		}
	}
</script>

<style lang="scss">
	.login {
		color: #efefef; 
		width: 90%; 
		border-radius: 100px; 
		margin-top: 5px; 
		height: 40px; 
		display: flex; 
		align-items: center; 
		justify-content: center;
	}
	
	.panel1 {
		height: 43px;
		display: flex; 
		background-color: white; 
		font-size: 13px; 
		justify-content: space-between; 
		position: relative;
		top: -10px;
		margin: 0 10px;
		border-radius: 8px;
	}
	
	.panel2 {
		height: 90px;
		background-color: white; 
		border-radius: 8px;
		margin: 0 10px;
		margin-top: 5px;
	}
	
	.panel3 {
		height: 162px;
		background-color: white; 
		border-radius: 8px;
		margin: 0 10px;	
		margin-top: 15px;
	}
	
	

</style>
